<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>添加品牌</title>
    </head>
    <body>
        <h3>添加品牌</h3>
        <div id="app">
            <!--表单直接提交属于同步请求方式提交表单，为了使用异步方式以及AJAX+JSON异步方式提交所以要将action属性值设为空并将提交按钮的type属性值设为button-->
            <!--action的属性值为浏览器提交到服务器的资源路径-->
            <!--将action属性值由具体的url改为空-->
            <form action="" method="post">
                品牌名称：<input id="brandName" name="brandName" v-model="brand.brandName"><br>
                企业名称：<input id="companyName" name="companyName" v-model="brand.companyName"><br>
                排序：<input id="ordered" name="ordered" v-model="brand.ordered"><br>
                描述信息：<textarea rows="5" cols="20" id="description" name="description" v-model="brand.description"></textarea><br>
                状态：
                <input type="radio" name="status" value="0" v-model="brand.status">禁用
                <input type="radio" name="status" value="1" v-model="brand.status">启用<br>
                <!--将提交按钮的type属性由submit改为button-->
                <input type="button" v-on:click="submitForm()" value="提交">
            </form>
        </div>

        <script src="js/axios-0.18.0.js"></script>
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>

        <script>
            new Vue({
                el: "#app",
                data() {
                    return {
                        /*
                        由于数据最终要封装为对象，所以直接创建一个对象即可
                        注意：不需要给该对象属性，是因为 Vue.js 的双向数据绑定机制和响应式系统会自动处理，
                        即v-model 自动创建对象属性并追踪它们，只要用户填写输入框，就会自动将其作为brand对象的属性封装起来
                         */
                        brand:{}
                    }
                },
                methods:{
                    submitForm() {
                        var _this = this;
                        // 发送axios请求并添加数据
                        axios({
                            method:"post",
                            url:"http://localhost:8080/VueDemo/addServlet",
                            //3 JSON数据格式发送请求
                            // formData为JS对象，Axios会自动将JS对象转为JSON字符串然后在传给服务端
                            data:_this.brand
                        }).then(function (resp) {
                            //4 获取响应数据并判断响应数据是否为success
                            if(resp.data == "success"){
                                location.href = "http://localhost:8080/VueDemo/brand.html";
                            }
                        })
                    }
                }
            })
        </script>
    </body>
</html>